class MessageBox {
  constructor(config) {
    this.$config = Object.assign(
      {
        width: 500,
      },
      config
    );

    this.el = document.createElement("div");
    this.el.classList.add("message-box");

    this.create();

    this.bindSuccessCallback();
  }

  // 创建元素
  create() {
    const html = `
    <div class="message-box" style="width:${this.$config.width}px">
      <div class="bg"></div>
      <div class="card">
        <header>
          标题名称
          <span>x</span>
        </header>
        <main>消息内容</main>
        <footer>
          <button>确定</button>
        </footer>
      </div>
    </div>
    `;
    this.el.innerHTML = html;

    document.body.appendChild(this.el);
  }
  // 19.51
  bindSuccessCallback() {
    const bt = document.querySelector(".message-box button");
    bt.addEventListener("click", this.$config.success.bind(this));
  }
  hide() {
    this.el.remove();
  }
}

export default function (config) {
  return new MessageBox(config);
}
